<template>
	<view>
		<!-- 拼团的商品详情 -->
		<image src="/static/images/秒杀活动-列表.png" class="topImage"></image>
		<view class="textPrice">
			<view class="miao">
				拼团
			</view>
			<view class="time">
				销量301
			</view>
			<view style="line-height: 10vh;font-size: 25rpx;width: 300rpx;font-weight: 600;color: #fff;">
				晒单赠30元红包
			</view>
			<view class="price">
				<text style="font-weight: 600;">￥234.50</text>
			</view>
		</view>
		<view class="prices">
			<text style="font-weight: 600;">￥234.50</text>
			<text class="decoration">￥345.00</text>
		</view>
		<view class="" style="width: 95%;margin-left: 3%;font-weight: 600;">
			【现货发顺丰6期免息】vivo x60 5G新品拍照智能手机5nm旗舰芯片蔡司光学镜头官方旗舰店官网正品限量纪念版
		</view>
		<view class="num">
			<text style="margin-left: 5%;">类型：6人团</text>
			<text style="margin-left: 20%;">累计销量：2</text>
			<text style="margin-left: 20%;">限购：5</text>
		</view>
		<view class="num">
			<text style="margin-left: 5%;">拼团玩法</text>
		</view>
		<view class="" style="margin-left: 3%; font-size:32rpx;width: 95%;height: 6vh;border-bottom: solid #666 1px;">
			<uni-steps :options="[{title: '①开团/参加'}, {title: '②邀请好友'}, {title: '③满员发货'}]" :active="1">
			</uni-steps>
		</view>
		<view class="num">
			<text style="margin-left: 5%;">拼团玩法</text>
		</view>
		<view class="" style="text-align: center;width: 100%;font-size: 40rpx;">
			产品介绍
		</view>
		<view class="centerClick">
			<view class="center" v-for="(item,index) in center">
				{{item}}
			</view>
		</view>
		<image src="/static/images/商品-详情-拼团.png" style="width: 95%;margin-left: 3%;height: 180vh;"></image>
		<view style="width: 100%;height: 7vh;"></view>
		<view
			style="position: fixed;bottom: 0;border-radius: 10rpx; width: 95%;height: auto;display: flex;line-height: 10vh;margin-top: 50rpx;margin-left: 3%;">
			<view class="left" @click="buttonPrice">
				单独购买
			</view>
			<view class="right" @click="button">
				立即拼团
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				center:[
					"商品",'评价','详情'
				]
			}
		},
		onLoad(option) {
			console.log('跳转id' + option.id)
		},
		methods: {
			button() {
				// 跳转商品详情
				uni.navigateTo({
					url: '/pages/home/SecKill-active/Product-details/settlement/settlement'
				});
			},
			buttonPrice(){
				// 跳转商品详情
				uni.navigateTo({
					url: '/pages/home/SecKill-active/Product-details/evaluate/purchase/purchase'
				});
			}
		}
	}
</script>

<style scoped>
	.center{
		width: 30%;
		font-size: 30rpx;
	}
	.centerClick{
		width: 95%;
		height: 8vh;
		line-height: 8vh;
		display: flex;
		margin-left: 3%;
		text-align: center;
	}
	.left {
		width: 50%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		background-color: #4CD964;
	}

	.right {
		width: 50%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		background-color: red;
		border-radius: 0 10rpx 10rpx 0;
	}

	.num {
		width: 95%;
		margin-left: 3%;
		height: 5vh;
		line-height: 5vh;
		font-size: 25rpx;
		border-bottom: solid 1px #665;
	}

	.prices {
		height: 10vh;
		line-height: 10vh;
		font-size: 40rpx;
		color: red;
	}

	.decoration {
		font-size: 23rpx;
		text-decoration: line-through;
		color: #666;
	}

	.time {
		font-size: 30rpx;
		width: 150rpx;
		line-height: 10vh;
		color: #fff;
		margin-left: 120rpx;
	}

	.price {
		width: 38%;
		height: 10vh;
		line-height: 10vh;
		background-color: #E8DBFA;
		font-size: 40rpx;
		text-align: center;
		color: red;
	}

	.miao {
		width: 80rpx;
		height: 80rpx;
		background-color: #5B21AF;
		margin-top: 20rpx;
		margin-left: 20rpx;
		text-align: center;
		border-radius: 5rpx;
		position: absolute;
		line-height: 80rpx;
		color: #fff;
	}

	.textPrice {
		width: 100%;
		height: 10vh;
		background-color: #007AFF;
		display: flex;
	}
</style>
